<template>
	<view>
		<u-navbar :border-bottom="false" title="已选学生" title-color="#fff" back-icon-color="#fff"></u-navbar>
    <view class="readTab"><view :class="select==index?'cur':''" v-for="(i,index) in tab" :key="index" @click="selectTab(i.type)">{{i.name}}({{i.type?info.havereadcount:info.unreadcount}})</view></view>
	  <my-empty  v-if="emptyFlase" emptyTit="暂无数据"></my-empty>
		<my-user-li v-for="(item,index) in list" :key="index" :infoName='item.username' :thumbnail='item.avatar?item.avatar:"../../../static/avatar.png"' @click.native="linkDeatil(item.userid)" >
	  	<template slot="nameBot" v-if="item.updatetime">
	  	<view class="name_bot_txt">
	  		<view class="name_line">查看时间：<text>{{item.updatetime}}</text></view>
	  	</view>
	  	</template>
			<template slot="right">
				<view :class="[select == 0 ? 'sortRight' : 'sortRight1']">{{item.organizename}}</view>
			</template>
	  </my-user-li>
	</view>
</template>

<script>
	export default {
		data() {
			return{
				tab:[
					{name:'未读',type:0},
					{name:'已读',type:1}
				],
				list:[],//当前选中的列表
				info:{},
				select:0,
				noticeid:'',
				emptyFlase:false
			}
		},
		onLoad(option){
			this.noticeid=option.noticeid
			this.init()
		},
		methods: {
			selectTab(type){
				this.select=type
				if(this.select==0){
					this.list=this.info.unread
				}else{
					this.list=this.info.haveread
				}
				this.emptyFlase=this.list.length>0?false:true
			},
			init(){
				this.select=0
				return this.getInfo()
			},
			getInfo(){
				const pageData={
					noticeid:this.noticeid,
					isread:this.select
				}
				return new Promise((resolve, reject) => {
					  this.request
						.get('/app/teacher/notice/readHappening',pageData)
						.then(res=>{
							this.info=res;
							this.list=this.info.unread
							this.emptyFlase=this.list.length>0?false:true
							resolve();
						})
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.empty{
		height: 80%;
		position: absolute;
		top: auto;
	}
	.paper-item{position: relative;}
	.hoverBg{
		background: none!important;
	}
	.name{
		width: 35%;
	}
	.sortRight{
		position: absolute;
		top: 37%;
		right: 31upx;
		text-align: right;
		width: 35%;
		height: 22px;
		line-height: 22px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.sortRight1{
		position: absolute;
		// top: 37%;
		right: 31upx;
		text-align: right;
		width: 35%;
		height: 22px;
		line-height: 22px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.readTab{
     height:110upx;
		 display: flex;
		 justify-content: center;
		 align-items: center;
		 border-bottom: 1px solid #ebebeb;
		 view{
			 width: 50%;
			 height: 110upx;
			 line-height: 110upx;
			 color: #363940;
			 font-size: 32upx;
			 text-align: center;
			
		 }
		 .cur{
			 color: #F45C4B;
			 font-weight: 600;
			 position: relative;
		 }
		 .cur::after{
			 content: '';
			 display: block;
			 height: 2px;
			 width: 100%;
			 background:linear-gradient(to right,#FC7767,#EC412F);
			 position: absolute;
			 bottom: 0;
		 }
	}
	.name_bot_txt{
		display: flex;
		justify-content: start;
		margin-top: 15upx;
		width: 100%;
		.name_line{
			width: 100%;
			display: flex;
			justify-content: start;
			align-items: center;
			color: #A6A6A6;
		}
		text{
			display: block;
			height: 35upx;
			overflow: hidden;
		}
	}
</style>
